<!doctype html>
<html style="height:100%;font-size:14px;">

<head>
  <meta name="spreadjs culture" content="zh-cn" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css"
    href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
  <script
    src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
    type="text/javascript"></script>
  <script
    src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
    type="text/javascript"></script>
  <!-- <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/license.js"
    type="text/javascript"></script> -->
  <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/jquery-1.8.2.min.js"
    type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="sample-tutorial">
    <div id="ss" class="sample-spreadsheets"></div>
    <div class="options-container">
      <div class="sp-demo-childBlock">
        <div class="sp-demo-Header">
          <strong class="sp-demo-HeaderTitle">Settings</strong>
        </div>
        <div id="settingsDiv">
          <div id="richEditor" class="rich-editor"></div>
          <ul id="fontSizeList" class="list">
            <li class="fontsize-item" value='1'>10</li>
            <li class="fontsize-item" value='2'>13</li>
            <li class="fontsize-item" value='3'>16</li>
            <li class="fontsize-item" value='4'>18</li>
            <li class="fontsize-item" value='5'>24</li>
            <li class="fontsize-item" value='6'>32</li>
            <li class="fontsize-item" value='7'>48</li>
          </ul>
          <ul id="fontFamilyList" class="list fontfamily-list">
            <li class="fontfamily-item">Segoe UI</li>
            <li class="fontfamily-item">Arial</li>
            <li class="fontfamily-item">Calibri</li>
            <li class="fontfamily-item">Courier New</li>
            <li class="fontfamily-item">Comic Sans MS</li>
            <li class="fontfamily-item">Microsoft YaHei</li>
            <li class="fontfamily-item">Times New Roman</li>
          </ul>
          <ul id="colorPicker" class="list">
            <li class="colorpicker-item" style="background-color:#FFFFFF;"></li>
            <li class="colorpicker-item" style="background-color: #C00000;"></li>
            <li class="colorpicker-item" style="background-color: #FF0000;"></li>
            <li class="colorpicker-item" style="background-color: #FFC003;"></li>
            <li class="colorpicker-item" style="background-color: #FFFF00;"></li>
            <li class="colorpicker-item" style="background-color: #94D051;"></li>
            <li class="colorpicker-item" style="background-color: #00B050;"></li>
            <li class="colorpicker-item" style="background-color: #00AFF0;"></li>
            <li class="colorpicker-item" style="background-color: #006EC3;"></li>
            <li class="colorpicker-item" style="background-color: #001E6E;"></li>
            <li class="colorpicker-item" style="background-color: #6E32A0;"></li>
            <li class="colorpicker-item" style="background-color: #000000;"></li>
          </ul>
          <button id="setRichText" value="Set Rich Text">Set Rich Text</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>